<template>
	<div class="npad-marquee-container">
		<div class="npad-marquee-body" ref="marqueeBody" :style="{ color:props.fontColor, fontSize:props.fontSize }">
			<div class="npad-marquee-play" ref="marqueeText" >{{props.text}}</div>
		</div>
	</div>
</template>

<script setup>
	import {ref,reactive,defineProps,onMounted,onUnmounted} from 'vue';
	const props = defineProps({
		text: {
			type: String,
			default: '',
		},
		fontColor:{
			type:String,
			default:'#000000'
		},
		fontSize:{
			type:String,
			default:'20px'
		},
		left:{
			type:Boolean,
			default:true
		}
	});
	const data = reactive({
		bodyWidth:0,
		textWidth:0,
		position:0,
		x:{
			start:'0px',
			end:'0px'
		},
	});
	
	const marqueeBody = ref();
	const marqueeText = ref();
	
	onMounted(() => {
		data.bodyWidth = marqueeBody.value.offsetWidth;
		data.textWidth = marqueeText.value.offsetWidth;
		if(props.left){
			data.position = -(data.textWidth / 2 + data.bodyWidth / 2);
			data.x.start = data.position  + 'px';
			data.x.end = data.position + data.bodyWidth + data.textWidth + 'px';
		} else {
			data.position = (data.textWidth / 2 + data.bodyWidth / 2);
			data.x.start = data.position  + 'px';
			data.x.end = data.position - (data.bodyWidth + data.textWidth) + 'px';
		}
	});
	
</script>

<style lang="less" scoped>
	.npad-marquee-container {
		width: 100%;
		overflow: hidden;
		display:flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		white-space: nowrap;overflow: hidden;
	}
	
	.npad-marquee-body {
		width: 75%;
		margin: 0.3125rem 0.3125rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display:flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.npad-marquee-play {
		white-space: nowrap;
		width: fit-content;
		text-overflow: ellipsis;
		animation: marquee-roll-play 7.1s linear infinite;
	}
	
	@keyframes marquee-roll-play {
		from {
			transform: translateX(v-bind('data.x.start'));
		}
	    to {
			transform: translateX(v-bind('data.x.end'));
		}
	}
</style>